<template>
    <view class="search">
        <view class="search-header">
            <u-search 
                placeholder="您想喝一些什么" 
                v-model="keyword"
                actionText="取消"
                @search="handleSearch"
                @custom="handleCancel"
            >
            </u-search>
        </view>

        <view class="search-result" v-if="searchHistory.length > 0">
            <u-cell
                size="large"
                title="历史搜索"
                value="清除"
                @click="clearHistory"
            ></u-cell>
            <view class="search-result-list">
                <view 
                    class="item"
                    v-for="(item, index) in searchHistory"
                    :key="index"
                    @click="() => handleSeeInfo(item)"
                >
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            searchHistory: [
                '茶改价哦',
                '咖啡 绝代风味',
                '奶茶超级QQ',
                '奶茶超级QQuu',
            ],
        }
    },
    onLoad() {
        console.log('页面加载完成');
    },
    methods: {
        handleSearch() {
            try {
                console.log('搜索确认事件', this.keyword);
                // 在这里可以添加更多的搜索逻辑处理
            } catch (error) {
                console.error('搜索确认事件处理时出错:', error);
            }
        },
        handleCancel() {
            try {
                console.log('点击取消事件');
                // 在这里可以添加更多的取消逻辑处理
            } catch (error) {
                console.error('点击取消事件处理时出错:', error);
            }
        },
        clearHistory() {
            try {
                this.searchHistory = [];
                console.log('历史搜索已清除');
            } catch (error) {
                console.error('清除历史搜索时出错:', error);
            }
        },
        handleSeeInfo(item) {
            try {
                console.log('查看详情:', item);
                // 弹出查看详情页面，并且带出id和name
            } catch (error) {
                console.error('查看详情时出错:', error);
            }
        },
    }
}
</script>

<style scoped lang="scss">
$dif_width: calc(100% - 20px);
.search {
    width: 100%;
    .search-header {
        width: $dif_width;
        margin: 0 auto;
    }
    .search-result {
        width: $dif_width;
        margin: 0 auto;
        .search-result-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .item {
                padding: 5px 10px;
                flex-shrink: 0;
                width: auto;
                border-radius: 15px;
                background-color: #f5f5f5;
                margin: 5px;
            }
        }
    }
}
</style>
